<div class="container" phx-hook="IndexPage">
  <%# 分类卡片 %>
  <section class="section is-hidden-mobile">
    <div class="columns cm-home-categories-card">
      <%= for category <- @categories do %>
        <div class="column">
          <div class="card cm-category">
            <div class="card-content has-text-centered">
              <%= live_link class: "cm-category-icon",
                    to: Routes.live_path(@socket, category.view_module, category.params) do %>
                <i class="<%= category.icon %>" style="color: <%= category.color %>;"></i>
              <% end %>
            </div>
            <footer class="card-footer">
              <%= live_link class: "card-footer-item cm-category-link",
                    to: Routes.live_path(@socket, category.view_module, category.params) do %>
                <span><%= category.text %></span>
              <% end %>
            </footer>
          </div>
        </div>
      <% end %>
    </div>
  </section>
  <%# 文章列表卡片 %>
  <section class="section">
    <div class="card cm-home-articles-card">
      <header class="card-header">
        <p class="card-header-title">
          <%= live_link "最近的帖子", to: Routes.live_path(@socket, CommunityWeb.TopicsLive) %>
        </p>
      </header>
      <%= Phoenix.LiveView.live_render @socket,
          CommunityWeb.ArticlesLive, 
          container: {:div, class: "card-content"},
          session: %{page: 1, gsize: 2}, id: "home_articles" %>
    </div>
  </section>
  <%# 节点导航卡片 %>
  <section class="section">
    <div class="card cm-home-nodes-card">
      <header class="card-header">
        <p class="card-header-title">节点导航</p>
      </header>
      <div class="card-content">
        <%= for group <- @node_groups do %>
          <div class="columns cm-node-group">
            <div class="column is-2 has-text-right cm-node-group-name">
              <label><%= group.name %></label>
            </div>
            <div class="column is-10">
              <%= for node <- group.nodes do %>
                <span class="cm-node">
                  <%= live_link node.name, 
                      to: Routes.live_path(@socket, CommunityWeb.TopicsLive, %{node_id: node.id}),
                      class: "cm-node-name" %>
                </span>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </section>
  <%# 热门城市卡片 %>
  <section class="section">
    <div class="card cm-hot-cities">
      <header class="card-header">
        <p class="card-header-title">热门城市</p>
      </header>
      <div class="card-content has-text-centered">
        <%= for city <- @cities do %>
          <span>
            <%= live_link city.name, 
                  to: Routes.live_path(@socket, CommunityWeb.CityLive, city.id) %>
          </span>
        <% end %>
      </div>
    </div>
  </section>
</div>
